import React, { useState } from 'react';
import { connect } from 'dva';
import { Modal, Button, Input } from 'antd';

import './index.styl';
import { fitterInput } from 'utils/filters'

const { TextArea } = Input;

function DeclareFault({ cancelDecl, visible, dispatch, proId, pageNations }) {
  const [len, setLen] = useState(0);
  const [isShow, setShow] = useState(false);
  const [str, setStr] = useState('');
  function submitReason() {
    if (len === 0) {
      setShow(true);
      return;
    }
    dispatch({
      type: 'deviceLedger/delFalut',
      payload: {
        contnet: {
          faultReason: str,
          id: proId, runStatus: 2,
        },
        pageNations,
      },
    });
    cancelDecl();
    setStr('')
  }
  return (
    <div style={{ display: 'inline-block', marginRight: '0.16rem' }}>
      <div>
        <Modal
          width={'4rem'}
          visible={visible}
          footer={null}
          closable={false}
          onOk={() => { }}
          onCancel={() => { }}
          bodyStyle={{ padding: 0 }}
          maskClosable={false}
          mask={false}
          destroyOnClose={true}
        >
          <div className="messageModel declareFault">
            <div className="headTitle">
              <span className="titleText">申报故障</span>
              <span onClick={() => {
                cancelDecl()
                setStr('')
              }} className="cancelBtn">
                X
              </span>
            </div>
            <div className="textArea-wrapper">
              <TextArea
                col={4}
                placeholder="请输入故障原因"
                maxLength="30"
                value={str}
                onChange={e => {
                  setStr(e.target.value.replace(/\s+/g, ''));
                  setLen(e.target.value.replace(/\s+/g, '').length);
                  setShow(false);
                }}
              />
              <div className="tip">
                {isShow ? (
                  <div style={{ color: 'red', fontSize: '0.14rem' }}>请输入故障原因</div>
                ) : (
                    <div />
                  )}
                <div>{len}/30</div>
              </div>
            </div>
            <div className="btnsBox">
              <Button type="default" className="cancleBtn" onClick={() => {
                cancelDecl()
                setStr('')
              }}>
                取消
              </Button>
              <Button type="primary" className="okBtn" onClick={submitReason}>
                确定
              </Button>
            </div>
          </div>
        </Modal>
      </div>
    </div>
  );
}

export default connect(({ deviceLedger }) => ({
  deviceLedger,
}))(DeclareFault);
